<template>
  <div class="dis-jb pad-8">
    <div class="dis-jc">
      <!-- <img class="avatar" src="@/assets/logo-white.png" alt="" /> -->
      <img class="avatar" :src="login" alt="" />
      <h3 class="white-title">{{ title }}</h3>
    </div>
    <div class="dis-jc">
      <el-dropdown placement="bottom-end">
        <span class="el-dropdown-link">
          {{ userInfo?.realname }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>基本资料</el-dropdown-item>
            <el-dropdown-item @click="getLogout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { logout } from "@/api";
import router from '@/router'
import { BASE_API } from "@/config";

const title = ref('艾布斯IEBOX执行力系统');
const login = ref('/src/assets/logo-white.png');
const userInfo = ref();
const getLogout = async () => {
  await logout().then(() => {
    localStorage.clear();
    router.push('/login')
  });
};
onMounted(async () => {
  userInfo.value = JSON.parse(localStorage.getItem("UserInfo"));
  const projectData = JSON.parse(localStorage.getItem("projectData"));
  title.value = projectData.projectTitle
  login.value =  projectData.projectLogo
});
</script>

<style scoped lang="scss">
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}
.white-title,
.el-dropdown-link {
  color: #fff;
}
</style>
